<template>
  <div class="collapse-container">
    <div class="collapse-header" @click="toggleCollapse">
      <h3>{{ title }}</h3>
      <img :src="arrowIcon" alt="toggle" class="arrow-icon" :class="{ 'rotate-180': isCollapsed }" />
    </div>

    <transition name="slide">
      <div class="collapse-content" v-show="!isCollapsed">
        <slot></slot>
      </div>
    </transition>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

const props = defineProps({
  title: {
    type: String,
    default: '折叠标题',
  },
})

const isCollapsed = ref(false)

// 这里使用Base64编码的简单箭头图标，实际项目中可以用你自己的图标
const arrowIcon = ref(
  '',
)

const toggleCollapse = () => {
  isCollapsed.value = !isCollapsed.value
}
</script>

<style scoped>
.collapse-container {
  border: 1px solid #eaeaea;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 16px;
}

.collapse-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background-color: #f5f5f5;
  cursor: pointer;
  user-select: none;
}

.collapse-header:hover {
  background-color: #eee;
}

.arrow-icon {
  width: 20px;
  height: 20px;
  transition: transform 0.3s ease;
}

.rotate-180 {
  transform: rotate(180deg);
}

.collapse-content {
  padding: 16px;
  background-color: white;
}

/* 折叠动画效果 */
.slide-enter-active,
.slide-leave-active {
  transition: all 0.3s ease;
  max-height: 1000px; /* 设置一个足够大的值 */
  overflow: hidden;
}

.slide-enter-from,
.slide-leave-to {
  max-height: 0;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
}
</style>
